<template>
  <div class="event">
    <div class="search">
      <div class="search_div">
        活动搜索

      </div>
    </div>
    <div class="page-navbar">

      <!-- navbar -->
      <mt-navbar class="page-part out" v-model="selected">
        <mt-tab-item id="recently">最近</mt-tab-item>
        <mt-tab-item id="hot">热门</mt-tab-item>
        <mt-tab-item id="my_join">我参加的</mt-tab-item>
      </mt-navbar>
      <!-- gray -->
      <div class="gray">
      </div>

      <!-- tabcontainer -->
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="recently">

          <ul class="nini" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="20">
            <!-- <li v-for="item in items">
            <router-link class="routeboxr" to="event_details">
              <div class="breviary clearfix"><img src="~src/images/details.png" alt=""></div>
              <div class="details ">
                <h2 class="title">{{item.cparagraph}}</h2>
                <div class="tab">
                  <span>马云</span>
                  <span>腾讯</span>
                  <span>奖品多</span>
                </div>
                <p class="time">2017.09.01 9:00-2017.09.02 9:00</p>
                <p class="address">广交会展馆B区12.1馆
                  <span class="already">已报名</span>
                </p>
              </div>
             </router-link>
            </li> -->
               <li v-for="item in items">
            <router-link class="routeboxr" to="event_details">
              <div class="breviary clearfix"><img :src="item.CoverPicture" alt=""></div>
              <div class="details ">
                <h2 class="title">{{item.Theme}}</h2>
                <div class="tab">
                  <span v-for="(tag,index) in item.Tags.split('，')">{{ item.Tags.split('， ')[index]}}</span> 
                </div>
                <p class="time">{{item.StartTime}}-{{item.EndTime}}</p>
                <p class="address">{{item.SiteName}}
                  <span class="already" v-show="item.ApplyStatus === 1">已报名</span>
                  <span class="already" v-show="item.ApplyStatus === 0">未报名</span>
                </p>
              </div>
             </router-link>
            </li>
          </ul>

        </mt-tab-container-item>
        <mt-tab-container-item id="hot">
          <ul  v-infinite-scroll="hotMore" infinite-scroll-disabled="loading2" infinite-scroll-distance="20">
            <li v-for="item in items">
              <div class="breviary clearfix"><img :src="item.CoverPicture" alt=""></div>
              <div class="details ">
                <h2 class="title">{{item.Theme}}</h2>
                <div class="tab">
                  <span v-for="(tag,index) in item.Tags.split('，')">{{ item.Tags.split('，')[index]}}</span> 
                </div>
                <p class="time">{{item.StartTime}}-{{item.EndTime}}</p>
                <p class="address">{{item.SiteName}}
                  <span class="already" v-show="item.ApplyStatus === 1">已报名</span>
                  <span class="already" v-show="item.ApplyStatus === 0">未报名</span>
                </p>
              </div>
            </li>
          </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="my_join">
            <ul v-infinite-scroll="aboutMeMore" infinite-scroll-disabled="loading3" infinite-scroll-distance="20">
            <li if-show="items" v-for="item in items">
              <div class="breviary clearfix"><img :src="item.CoverPicture" alt=""></div>
              <div class="details ">
                <h2 class="title">{{item.Theme}}</h2>
                <div class="tab">
                  <span v-for="(tag,index) in item.Tags.split('，')">{{ item.Tags.split('，')[index]}}</span>
                </div>
                <p class="time">{{item.StartTime}}-{{item.EndTime}}</p>
                <p class="address">{{item.SiteName}}
                  <span class="already" v-show="item.ApplyStatus === 1">已报名</span>
                  <span class="already" v-show="item.ApplyStatus === 0">未报名</span>
                </p>
              </div>
            </li>
            <li if-show="!items">
              没有数据
            </li>
          </ul>
        </mt-tab-container-item>
      </mt-tab-container>

    </div>
  </div>
</template>  
  
<script>  

//import { user_event_api } from 'src/servise/getData';
import { FindActivites } from 'src/servise/getData';
import { user_eventData } from 'src/servise/user_eventData'; // 最近 热门 我参与 假数据
import { UserSearchProduct_api } from 'src/servise/getData'; // 最近 热门 我参与 真数据
import { MessageBox } from 'mint-ui';
import Qs from 'Qs';
export default {

  data() {
    return {
      loginid: sessionStorage._LoginID,
      items: [], // 用户活动列表的数据
      selected: 'recently',
      newdata: '',
      newpage: 1, // 最近活动 第一页
      newPageIndex: 10  // 最近活动 每页10条
    }
  },
  watch: {
    selected: function(_val){
      console.log(_val);
      switch(_val){
        case "recently":
          this.getUserNewData();
        break;
        case "hot":
          this.getUserHotData();
        break;
        case "my_join":
          this.getUserMyJoinData();
        break;
      }
    }
  },
  created() {
  //   let time = new Date("2017-10-27T13:44:48").getFullYear();
  //   let time2 = new Date("2017-10-27T13:44:48").getMonth();

  // console.log(time);
  // console.log(time2);
  // console.log(time3);
    // 初始化获取最近活动列表
    this.getUserNewData();

    // 将标签字符串 以英文" , " 分割成数组
    this.setData();

  },
  methods: {
    setData() {
      // 将标签字符串 以英文" , " 分割成数组

        for( let attr in this.items){
            // 如果标签存在
            console.log(this.items[attr]["Tags"]);
            this.items[attr]["Tags"] = this.items[attr]["Tags"].split(',');
            console.log(this.items[attr]["Tags"]);
        }
      
      // this.items = user_eventData;
    },
    getUserMyJoinData(){
      // 获取我参与活动列表
       let That = this;
      console.log(UserSearchProduct_api+"?keyword=&UserId="+sessionStorage._LoginID+"&pageIndex="+this.newpage+"&pageSize="+this.newPageIndex+"&Type=1");
      this.$http.get(UserSearchProduct_api, {
       params: {
         "keyword": "",
          "UserId": sessionStorage._LoginID,
          "pageIndex": this.newpage,
          "pageSize": this.newPageIndex,
          "Type": 3
        }}).then((res) => {
          console.log("最新活动-start");
          if(res.data["ErrorCode"] != 0){
            return MessageBox.alert(res.data["ErrorMessage"]);
          }
          // res.data.Result
          That.items = res.data.Result;
          for(let attr in res.data.Result){
            console.log(res.data.Result[attr]);
          }
          //console.log(res.data.Result);
          console.log("最新活动-end");
      });
    },
    getUserHotData(){
      // 获取热门活动列表
       let That = this;
      console.log(UserSearchProduct_api+"?keyword=&UserId="+sessionStorage._LoginID+"&pageIndex="+this.newpage+"&pageSize="+this.newPageIndex+"&Type=1");
      this.$http.get(UserSearchProduct_api, {
       params: {
         "keyword": "",
          "UserId": sessionStorage._LoginID,
          "pageIndex": this.newpage,
          "pageSize": this.newPageIndex,
          "Type": 2
        }}).then((res) => {
          console.log("最新活动-start");
          if(res.data["ErrorCode"] != 0){
            return MessageBox.alert(res.data["ErrorMessage"]);
          }
          // res.data.Result
          That.items = res.data.Result;
          for(let attr in res.data.Result){
            console.log(res.data.Result[attr]);
          }
          //console.log(res.data.Result);
          console.log("最新活动-end");
      });
    },
    getUserNewData() {
      // 获取最近活动列表
      let That = this;
      console.log(UserSearchProduct_api+"?keyword=&UserId="+sessionStorage._LoginID+"&pageIndex="+this.newpage+"&pageSize="+this.newPageIndex+"&Type=1");
      this.$http.get(UserSearchProduct_api, {
       params: {
         "keyword": "",
          "UserId": sessionStorage._LoginID,
          "pageIndex": this.newpage,
          "pageSize": this.newPageIndex,
          "Type": 1
        }}).then((res) => {
          console.log("最新活动-start");
          if(res.data["ErrorCode"] != 0){
            return MessageBox.alert(res.data["ErrorMessage"]);
          }
          // res.data.Result
          That.items = res.data.Result;
          for(let attr in res.data.Result){
            console.log(res.data.Result[attr]);
          }
          //console.log(res.data.Result);
          console.log("最新活动-end");
      });
      //console.log(222);
    },
    hotMore() {
      // 拉到底部加载新数据
      this.loading2 = true;
    },
    aboutMeMore() {
       this.loading3 = true;
    },
    loadMore() {
      // 拉到底部加载新数据
      console.log(1111);
      this.loading = true;

      // setTimeout(() => {
      //   let that = this;
      //   this.$http.get(user_event_api).then(
      //     (res) => that.newdata=res.data.data)
      //    this.items = this.items.concat(this.newdata);
      // }, 500);
    }
  },
  
};

</script>  
<style lang="stylus" scoped>
    .tab
      margin-right 0.1rem!important
    .gray
      background-color #F2F2F2
      height 0.2415rem

    .mint-navbar .mint-tab-item.is-selected{
      border none
    }
    .mint-tab-item-label {
        font-size: 0.3623rem;
    }
    .mint-tab-container
      background-color #fff
   
    ul
     li 
       display flex
       flex-flow row
       padding 9.9981px 14.9992px
       border-bottom 1.0019px solid #DDDDDD
       position relative 
       background-size 100% 100%
       .breviary
         width 100.0017px
         height 100.0017px
         img
            width 100%
            height 100.0017px
            border 1.0019px solid #ddd
       .details
          flex  1
          padding-left  12.0019px
          h2
            font-size 0.3382rem
            padding-right 14.0015px
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          .tab
            font-size 0.2899rem
            margin-top 5.0011px
            span 
              display: inline-block;
              border: 0.0242rem solid #999;
              padding: 0px 0.1691rem
              text-align: center;
              border-radius: 9.0004px;
              color: #666;
              padding-top 0.0242rem
              margin-right 0.1rem
          .time
            font-size 0.2899rem
            color #999999
            margin-top 3.9992px
          .address
            font-size 0.3382rem
            margin-top 1.9996px
            position relative
          .already
            font-size: 0.2899rem;
            color: #0da4dc;
            position: absolute;
            bottom: 0px;
            right: 0px;

    .search
      padding 0.1208rem 0.3623rem
      background-color #fff
    
      .search_div
        background-color #F0F0F0
        text-align center
        font-size 0.3382rem
        padding 0.1449rem 0
        color #AEAEAE
       
    .mint-navbar .mint-tab-item {
    padding: 0.2899rem 0;
    font-size: 0.3623rem;
}
    .page-loadmore-wrapper {
        overflow: scroll
    }
    .routeboxr
      display flex
</style>
